<div class="body-wrapper">

<button id="sidebar-menu" class="sidebar-button sidebar-toggle" aria-label="toggle sidebar" aria-controls="sidebar">
  <i class="ri-menu-line ri-lg" title="Collapse/expand sidebar"></i>
</button>

<nav id="sidebar" class="sidebar">
  <% url = config.homepage_url || "#{config.main}.html" %>
  <div class="sidebar-header">
    <div class="sidebar-projectInfo">
      <%= if config.logo do %>
        <a href="<%= url %>" class="sidebar-projectImage">
          <img src="<%= logo_path(config) %>" alt="<%= config.project %>" />
        </a>
      <% end %>
      <div>
        <a href="<%= url %>" class="sidebar-projectName" translate="no">
          <%= config.project %>
        </a>
        <div class="sidebar-projectVersion" translate="no">
          v<%= config.version %>
        </div>
      </div>
    </div>
    <ul id="sidebar-list-nav" class="sidebar-list-nav" role="tablist" data-extras="<%= config.extra_section %>"></ul>
  </div>
</nav>

<output role="status" id="toast"></output>

<main class="content page-<%= type %>" id="main" data-type="<%= sidebar_type(type) %>">
  <div id="content" class="content-inner">
    <div class="top-search">
      <div class="search-settings">
        <form class="search-bar" action="search.html">
          <label class="search-label">
            <span class="sr-only">Search documentation of <%= config.project %></span>
            <div class="search-input-wrapper">
              <input name="q" type="text" class="search-input" placeholder="Press / to search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
              <button type="button" tabindex="-1" class="search-close-button" aria-hidden="true">
                <i class="ri-close-line ri-lg" title="Cancel search"></i>
              </button>
            </div>
          </label>
        </form>
        <div class="autocomplete">
        </div>
        <div class="engine-selector" data-multiple="<%= length(config.search) > 1 %>">
          <button type="button" class="engine-button" aria-label="Select search engine" aria-haspopup="true" aria-expanded="false">
            <i class="ri-search-2-line" aria-hidden="true"></i>
            <span class="engine-name"><%= hd(config.search).name %></span>
            <i class="ri-arrow-down-s-line" aria-hidden="true"></i>
          </button>
          <div class="engine-dropdown" hidden role="menu">
            <%= for {engine, index} <- Enum.with_index(config.search) do %>
              <button type="button"
                      class="engine-option"
                      data-engine-url="<%= engine.url %>"
                      role="menuitemradio"
                      aria-checked="<%= if index == 0, do: "true", else: "false" %>">
                <span class="name"><%= engine.name %></span>
                <span class="help"><%= engine.help %></span>
              </button>
            <% end %>
          </div>
        </div>
        <button class="icon-settings display-settings">
          <i class="ri-settings-3-line"></i>
          <span class="sr-only">Settings</span>
        </button>
      </div>
    </div>
